import { PureComponent } from 'react';
import { exportFile } from 'table-xlsx';

import { TableC, PrimaryC, SecondHeaderC } from '@/src/comps';

export default class SettingRowStyle extends PureComponent {
  getColumn = (colNum = 4) => {
    const columns = [];
    for (let i = 0; i < colNum; i++) {
      columns.push({
        title: `标题${i}`,
        dataIndex: `title${i}`,
        key: `title${i}`,
        width: 120,
      });
    }
    return columns;
  };

  getData = (colNum = 4, dataNum = 100) => {
    const dataSource = [];
    for (let r = 0; r < dataNum; r++) {
      const row = {};
      for (let c = 0; c < colNum; c++) {
        row[`title${c}`] = `内容${r}:${c}`;
      }
      dataSource.push(row);
    }
    return dataSource;
  };

  onExportFileClick = () => {
    exportFile({
      fileName: '设置行样式导出.xlsx', // 文件名
      columns: this.getColumn(), // 表格columns
      dataSource: this.getData(), // 表格dataSource
      onTxBodyRow: (record, index) => {
        // 行样式
        let style;
        if (index % 3 === 1) {
          style = { fillFgColorRgb: 'EEEEE0' };
        }
        if (index % 3 === 2) {
          style = { fillFgColorRgb: 'FFE4C4' };
        }
        return { style };
      },
      headerCellStyle: {
        fillFgColorRgb: 'e8efff', // header行的填充颜色
      },
    });
  };

  render() {
    return (
      <div className='SettingRowStyle'>
        <SecondHeaderC title='设置行样式导出' />
        <PrimaryC title='导出' onClick={() => this.onExportFileClick()} />
        <div>
          <TableC dataSource={this.getData()} columns={this.getColumn()} size='small' bordered hidePage scroll={{ y: true, x: true }} />
        </div>
      </div>
    );
  }
}
